<!DOCTYPE html>
<!-- 若界面需要用到表单，则修改fragment文件为generic-frame，没用到就用原来的frame。
	 generic-frame多了两个参数，一个是表单一个是js标签，参数不用修改。
-->
<html lang="en" xmlns:th="http://www.thymeleaf.org"
	th:replace="fragments/generic-frame::frame(~{fragments/menu::menu(3)}, 
	~{::th}, ~{::tr}, ~{::form}, ~{::script})">
<head></head>
<body>

	<th>课程名称</th>
	<th>开课教师编号</th>
	<th>第几周开始</th>
	<th>第几周结束</th>
	<th>星期几上课</th>
	<th>第几节课</th>
	<th>教室名称</th>
	<th>课程类型</th>
	<th>课程状态</th>
	<!-- 添加一列来放操作(如果这个页面不需要操作就不用，比如学生查询成绩就不需要操作)
-->
	<th>操作</th>
	<tr th:each="cinfo : ${list}">
		<th:block th:with="c=${cinfo.course}">
			<td><input type="checkbox" id="check-all" class="flat"></td>
			<td th:text="${c.name}">Web高级编程</td>
			<td th:text="${cinfo.teacher}">张恒锋</td>
			<td th:text="${c.startweek}">10</td>
			<td th:text="${c.endweek}">17</td>
			<td th:text="${c.dayofweek}">1</td>
			<td th:text="${c.lesson}">2</td>
			<td th:text="${c.classroom}">C202</td>
			<td th:text="${c.type==0 ? '非实验课' : '实验课'}">非实验课</td>
			<td th:if="${c.state==0}">还未通过审核</td>
			<td th:if="${c.state==1}">审核通过</td>
			<td th:if="${c.state==2}">审核不通过</td>
			<td th:if="${c.state==3}">已结课</td>
			<td>
<!-- 	data-toggle是代表发送的事件，data-target代表事件发送给谁，
		这样设置后就会显示id为edit-modal的modal(在fragments里已经写好了一个modal，id固定为edit-modal)，
		这里只需要写modal里面的form就行了。
		btn-info是淡蓝色的，如果是其它一些操作，可以换成其它颜色，比如"审核通过"用btn-success(绿色)，"不通过"用btn-danger(红色) 
		data-id 里添加了每个课程的id，在提交表单时需要
--> <a th:attr="data-id=${c.no}" href="#" class="btn-sm btn-info"
				data-toggle="modal" data-target="#edit-modal">调整时间</a>
			</td>
		</th:block>
	</tr>

	<!-- 将会放到modal里的form，id必须是modal-form，否则点击按钮不能提交(提交按钮在fragment里，form里不需要提交按钮！) -->
	<form id="modal-form" action="arrange-time" method="post">
		<!-- 		每一个输入框都对应一个form-group -->
		<div class="form-group">
			<!-- 			label的for与input的id对应  -->
			<label for="startweek" class="control-label">第几周开始:</label>
			<!-- 			input的name  -->
			<input type="text" name="startweek" class="form-control" id="startweek">
		</div>

		<div class="form-group">
			<label for="endweek" class="control-label">第几周结束:</label> <input
				type="text" name="endweek" class="form-control" id="endweek">
		</div>

		<div class="form-group">
			<label for="dayofweek" class="control-label">星期几上课:</label> <input
				type="text" name="dayofweek" class="form-control" id="dayofweek">
		</div>

		<div class="form-group">
			<label for="lesson" class="control-label">第几节课:</label> <input
				type="text" name="lesson" class="form-control" id="lesson">
		</div>
		<input name="course" id="course" type="hidden" />
	</form>

	<script type="text/javascript">
		$(function() {
			// 這是固定写法，代表当弹窗弹出时会调用这个function
			$('#edit-modal').on('show.bs.modal', function(e) {
				var modal = $(e.currentTarget); // 弹窗对象
				// e.relatedTarget就是点击的那个按钮(就是点击的这个按钮触发的弹窗)
				// closest('tr')找到离这个按钮最近的一个tr标签
				// find('td')在这个tr标签里找到所有的td标签
				var btn = $(e.relatedTarget);
				var tds = btn.closest('tr').find('td');
				// 通过eq(index)来取第几个td(下标从0开始。注意每行都有一个checkbox，在第0个位置)
				// modal.find('#startweek') 代表在弹窗中找到id为startweek的标签，在这里它就是用来输入"第几周开始"的input标签，
				// 把对应行的数据填到这些input里，就完成了数据的传递。
				modal.find('#startweek').val(tds.eq(3).text());
				modal.find('#endweek').val(tds.eq(4).text());
				modal.find('#dayofweek').val(tds.eq(5).text());
				modal.find('#lesson').val(tds.eq(6).text());
				modal.find('#course').val(btn.data('id')); // data.('id')，代表取出btn中data-id这个属性的值
			});
		})
	</script>
</body>
</html>